<template>
  <f7-page ptr @ptr:refresh="handleRefresh">
    <f7-navbar>
      <f7-nav-title>{{$t('m.tabs.assetsTitle')}}</f7-nav-title>
    </f7-navbar>

    <div class="assets-card">
      <h1>≈${{getAllTotal}}</h1>
      <div class="card-bottom">
        <div>
          <p>{{$t('m.tabs.hostingRevenue')}}</p>
          <h5>{{$store.getters.userInfo.user_money.touzi_money || 0}}</h5>
        </div>
        <div>
          <p>{{$t('m.tabs.availableBalance')}}</p>
          <h5>${{getCardTotal}}</h5>
        </div>
      </div>
    </div>

    <!--<f7-block-title>我的财富</f7-block-title>

    <div class="list-box">
      <card-one title="BCDT_II" subtitle="$1.00000000" :media="require('../../static/avatar.jpg')" v-for="(item, index) in 3" :key="index" link="/wealth-details/">
        <div slot="after">
          <h4>0.00000000</h4>
          <p>≈$0.00000000</p>
        </div>
      </card-one>
    </div>-->
    <f7-block-title>{{$t('m.tabs.digitalAssets')}}</f7-block-title>

    <div class="list-box">
      <!--<card-one title="ZOL" subtitle="$1.00000000" :media="require('../../static/avatar.jpg')" link="/assets-details/?type=1">
        <div slot="after">
          <h4>0.00000000</h4>
          <p>≈$0.00000000</p>
        </div>
      </card-one>
      <card-one title="USDT" subtitle="$1.00000000" :media="require('../../static/avatar.jpg')" link="/assets-details/?type=2">
        <div slot="after">
          <h4>0.00000000</h4>
          <p>≈$0.00000000</p>
        </div>
      </card-one>-->
      <card-one :title="item.name" :subtitle="`$${item.price || '0.00'}`" :media="item.logo" v-for="(item, index) in showCurrency" :key="index" :link="`/assets-details/?id=${item.id}`">
        <div slot="after">
          <h4>{{item.total}}</h4>
          <p>≈${{(parseFloat(item.total) * (parseFloat(item.price || 0))).toFixed(item.xiaoshu)}}</p>
        </div>
      </card-one>
    </div>
  </f7-page>
</template>

<script>
  import CardOne from '../../ajComponents/card'
  export default {
    name: "wallet",
    computed: {
      showCurrency() {
        return this.$store.getters.currencyInfo.map(item => {
          this.$set(item, 'total', (parseFloat(item.num) + parseFloat(item.num_ctc_frozen)).toFixed(item.xiaoshu));
          this.$set(item, 'topTotal', (parseFloat(item.num) + parseFloat(item.num_ctc_frozen) + parseFloat(item.num_frozen)).toFixed(item.xiaoshu));
          return item;
        }).filter(item => item.is_show!=="0");
      },
      getCardTotal() {
        let initValue = 0;
        return this.showCurrency.reduce((total,cur) => {
          return total + parseFloat(cur.num) * parseFloat(cur.price || 0);
        }, initValue).toFixed(8)
      },
      getAllTotal() {
        let initValue = 0;
        return this.showCurrency.reduce((total,cur) => {
          return total + cur.topTotal * parseFloat(cur.price || 0);
        }, initValue).toFixed(8)
      }
    },
    mounted() {
      let test = 1578827575*1000 + 60*1000*15;
      console.log(this.$moment(test).format('YYYY-MM-DD HH:mm:ss'))
    },
    methods: {
      handleRefresh(done) {
        this.$store.dispatch('GetCurrencyInfo').then(() => {
          this.$store.dispatch('GetInfo');
          done();
        })
      },
    },
    components: {
      CardOne
    }
  }
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .assets-card {
    height: 350px;
    border-radius: $radius;
    margin: $padding20 $padding;
    background: url("../../static/home-card-bg.png") no-repeat center top;
    background-size: cover;
    color: #fff;
    padding-top: 80px;
    box-sizing: border-box;
    h1 {
      text-align: center;
      font-weight: bold;
      @extend .h1;
    }
    .card-bottom {
      text-align: center;
      display: flex;
      justify-content: space-around;
      padding-top: 50px;
      p {
        padding-bottom: 10px;
      }
      h5 {
        font-size: 25px;
      }
    }
  }
  .list-box {
    @extend .content-padding;

  }

</style>
